<template>
  <div
    v-show="!item.hide"
    :class="`form-card for_${xvueTheme}`"
  >
    <PanelLabelOverflowTooltip ref="panelLabelOverflowTooltip" />
    <el-form
      ref="form"
      v-panel-label-overflow-tooltip="getPanelLabelOverflowTooltip()"
      class="prop-form"
      label-position="right"
      :model="item"
      :rules="rules"
      label-width="110px"
    >
      <VsFormItem
        :label="item.type === 'in' ? $demoi18n('panelEvent.label.receiveEvent') : $demoi18n('panelEvent.label.issueEvent')"
        prop="key"
      >
        <el-input
          v-model="item.key"
          :placeholder="$demoi18n('word.plsInput')"
          size="default"
        ></el-input>
      </VsFormItem>

      <!-- 数据库字段转换 -->
      <div
        v-if="item.type === 'in' && item.dbFields.length"
        class="dbFields"
      >
        <table>
          <tr>
            <th>{{ $demoi18n('panel-linkage.receiveKey') }}</th>
            <th>{{ $demoi18n('panel-linkage.dataField') }}</th>
            <th>
              <el-button
                :link="true"
                type="primary"
                icon="Plus"
                size="default"
                @click="addDbField()"
              ></el-button>
            </th>
          </tr>
          <tr
            v-for="(n, i) in item.dbFields"
            :key="i"
          >
            <td>
              <ValueInputer
                v-model:value="n.paramKey"
                required
              />
            </td>
            <td>
              <ValueInputer
                v-model:value="n.dbField"
                required
              />
            </td>
            <td>
              <el-button
                :link="true"
                type="primary"
                icon="Delete"
                size="default"
                @click="delDbField(n)"
              ></el-button>
            </td>
          </tr>
        </table>
      </div>

      <VsFormItem
        v-for="(parameter, pIndex) in item.parameters"
        v-show="!parameter.hide && item.type === 'out' && isEndTimeHidden(parameter)"
        :key="pIndex"
        :label="parameter.label"
        prop="parameters[0].key"
      >
        <el-input
          v-model="parameter.key"
          :placeholder="$demoi18n('placeholder.plsEnterKey')"
          size="default"
        ></el-input>
      </VsFormItem>

      <!-- config有extraTpye为fieldName的 才展示（ page-table 用到） -->
      <VsFormItem
        v-if="item.type === 'out' && item.extraTpye && item.extraTpye === 'fieldName'"
        :label="$demoi18n('word.fieldName')"
        prop="paramKey"
        tip-key="linakge.outParamKey"
      >
        <el-input
          v-model="item.paramKey"
          :placeholder="$demoi18n('word.plsInput')"
          size="default"
        ></el-input>
      </VsFormItem>
    </el-form>

    <div
      v-if="item.type === 'in'"
      class="btns"
    >
      <el-icon
        v-show="!item.dbFields.length"
        :title="$demoi18n('panel-linkage.linkedDataFields')"
        @click="addDbField()"
      ><Link /></el-icon>
      <el-icon
        v-show="!hideDelete"
        @click="deleteItem"
      ><CircleClose /></el-icon>
    </div>
  </div>
</template>

<script>
import PanelLabelOverflowTooltip from '@/components/common/overflow-tooltip/overflow-tooltip.vue';
import ValueInputer from '@/components/common/value-inputer/value-inputer.vue';
import VsFormItem from '@/components/common/vs-form-item/vs-form-item.vue';
import { generateRules } from '@/utils/rules';

export default {
  name: 'PanelLinkageFormCardIndexXvueNew',
  components: { PanelLabelOverflowTooltip, ValueInputer, VsFormItem },
  props: ['item', 'index', 'isHidden', 'hideDelete'],
  emits: ['deleteItem'],
  data() {
    return {
      xvueTheme: window._adoPremise.uc.theme,
      rules: {
        key: generateRules({
          label: this.$demoi18n('panelData.label.eventName'),
        }),
        'parameters[0].key': generateRules({
          label: this.$demoi18n('panelData.label.eventKey'),
          max: 500,
        }),
        paramKey: generateRules({
          label: this.$demoi18n('word.fieldName'),
          required: false,
        }),
      },
    };
  },
  computed: {},
  watch: {

    // 接收linkage显隐控制项
    isHidden: {
      handler: function(newVal, oldVal) {
        const parameter = this.item.parameters[1];
        if (parameter) {
          parameter.isHidden = newVal;
        }
      },
      immediate: true,
    },
  },
  created() {
    if (!this.item.dbFields) {
      this.item.dbFields = [];
    }
  },
  methods: {
    getPanelLabelOverflowTooltip() {
      return {
        parentComp: this,
      };
    },
    deleteItem() {
      this.$emit('deleteItem', this.index);
    },

    // 时间组件显隐控制
    isEndTimeHidden(parameter) {
      const res = Object.keys(parameter).includes('isHidden') && this.isHidden;
      return !res;
    },
    check(_this) {
      return new Promise(resolve => {
        this.$refs.form.validate(valid => {
          if (!valid) {
            _this.activeName = 'third';
          }
          resolve(valid);
        });
      });
    },
    addDbField() {
      this.item.dbFields.push({
        paramKey: '',
        dbField: '',
      });
    },
    delDbField(n) {
      const index = this.item.dbFields.indexOf(n);
      this.item.dbFields.splice(index, 1);
    },
  },
};
</script>

<style lang="less" scoped>
.form-card {
  padding: 12px 10px;
  margin-top: 10px;
  margin-bottom: 1px;
  position: relative;
  &:hover {
    outline: 1px solid #9cdeff;
    .btns {
      display: block;
    }
  }
  :deep(.el-form-item__label) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dbFields {
    padding: 5px;
    table{
      width: 100%;
    }
    th {
      font-size: 12px;
    }
    th,
    td {
      background-color: transparent;
      text-align: left;
    }
  }

  .btns {
    display: none;
    position: absolute;
    right: 10px;
    top: -10px;
    i {
      margin: 0 5px;
      font-size: 12px;
      cursor: pointer;
    }
  }

  &.for_light {
    .dbFields {
      background-color: #e4e7ed;
    }
    .btns {
      background-color: #fff;
      color: #409eff;
    }
  }
  &.for_dark {
    .dbFields {
      background-color: #122b40;
    }
    .btns {
      background-color: #081f30;
      color: #98cae6;
    }
  }
}
</style>
